<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>

<body>


    <div id="root">
           <input type="text" value="输入名字" v-model:value="KeyWord">
           <ul>
            <li  v-for="(p,index) in newpersons" :key="index">

                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
           </ul>
    </div>


</body>

<script>
    new Vue({
        el: "#root",
        data: {
            KeyWord:'',
            persons:[
                {id:"001",name:"张三",age:18,sex:"男"},
                {id:"002",name:"李四",age:20,sex:"男"},
                {id:"003",name:"王四",age:20,sex:"女"}, 
                {id:"004",name:"赵六",age:20,sex:"女"},          
            ],
            newpersons:[]
        },
        watch:{
            KeyWord:{      
                immediate:true,
                handler(newovalue){
                    console.log("监听到输入框变化了",newovalue);
                    this.newpersons=this.persons.filter((p)=>{
                        return p.name.indexOf(newovalue)!==-1
                    })
                }                  
             }
         }
        
    })
</script>

</html>